<template>
	<!-- 角色管理 -->
	<div class="role_container">
		<div class="role_section">
			<!-- 头部--搜索添加 -->
			<div class="role_header">
				<el-input clearable v-model="page.name" style="width: 200px;" placeholder="请输入角色名称" />
				<el-button type="primary" icon="el-icon-search" @click='search' style="margin-left: 6px;">查找</el-button>
				<el-button type="primary" icon="el-icon-edit" @click='fixRole("add")'>添加</el-button>
			</div>
			<el-table :data='roleList' size="small" v-loading="loading" element-loading-text="正在查询中。。。" border fit
			 highlight-current-row>
				<el-table-column align="center" label="角色名称" prop="name" sortable />
				<el-table-column align="center" label="说明" prop="desc" />
				<el-table-column align="center" label="操作" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click='fixRole("edit",scope.row)'>编辑</el-button>
						<el-button type="danger" size="mini" @click='delRole(scope.row)'>删除</el-button>
						<el-button type="primary" size="mini" @click='handelRole(scope.row)'>授权</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 授权 -->
			<el-dialog :visible.sync="roleDialog" title="权限配置">
				<el-tree ref="tree" show-checkbox node-key="id" highlight-current :data="systemPermissions"  :default-checked-keys="assignedPermissions">
					<span slot-scope="{ node, data }" class="custom-tree-node">
						<span>{{ data.label }}</span>
						<el-tag v-if="data.api" type="success" size="mini">{{data.api}}</el-tag>
					</span>
				</el-tree>
				<div slot="footer" class="dialog-footer">
					<el-button @click="roleDialog = false">取消</el-button>
					<el-button type="primary" @click='permissionSubmit()' :loading="permissionLoad">确定</el-button>
				</div>
			</el-dialog>
			<!-- 添加或修改角色 -->
			<el-dialog :title='title' :visible.sync="addDialog">
				<el-form :model="roleFrom" ref="roleFrom" class="demo-dynamic" :rules="rules" status-icon label-position="left"
				 label-width="100px" style=" margin-left:50px;">
					<el-form-item label="角色名称" prop="name">
						<el-input v-model="roleFrom.name" style="width: 300px;" />
					</el-form-item>
					<el-form-item label="说明" prop="desc">
						<el-input v-model="roleFrom.desc" style="width: 300px;" />
					</el-form-item>
					<el-form-item style="margin-left: 480px;">
						<el-button @click="closeDialog()">取消</el-button>
						<el-button v-if="roleType === 'add'" type="primary" @click="addSubmit('roleFrom')">确定</el-button>
						<el-button v-else type="primary" @click="editSubmit('roleFrom')">确定</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<!-- 分页 -->
			<el-footer v-if="roleList.length>0" class="border-top d-flex align-items-center px-0  bg-white" style="margin-top: 36px;">
				<div style="flex: 1;" class="px-2">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageNo"
					 :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</el-footer>

		</div>
	</div>
</template>

<script>
	// import Cookies from "js-cookie";
	// import qs from 'qs';
	import {
		role,
		addRole,
		editRole,
		deleteRole,
		getPermission,
		updatePermission
	} from "../api.js"
	export default {
		data() {
			return {
				searchVal: '', //搜索值
				title: '创建', //对话框的标题
				//输入框验证
				rules: {
					name: [{
						required: true,
						message: "角色名称不能为空",
						trigger: "blur"
					}],
					desc: [{
						required: true,
						message: "角色描述不能为空",
						trigger: "blur"
					}]
				},
				page: { //分页
					pageNo: 1,
					size: 20,
					name:undefined
				},
				total: 1, //分页总条数
				roleDialog: false, //授权弹框
				roleList: [], //角色列表
				loading: false, //加载中
				addDialog: false, //添加修改弹框
				roleType: undefined, //判断添加还是修改
				roleFrom: {}, //表单数据
				editFrom: {},
				assignedPermissions: [], //授权内容
				systemPermissions: [], //权限
				permissionLoad: false,
				permission: {
					permissions: [], //选中的权限
					roleId: undefined
				}

			}
		},
		methods: {
			// 获取数据
			getDate() {
				this.loading = true;
				let _this = this;
				let page = {
					name:_this.searchVal,
					page:_this.page.current,
					limit:_this.page.size
				}
				role(page).then((res) => {
					console.log(res)
					_this.loading = false;
					_this.roleList = res.data.data.items;
					_this.total = res.data.data.total; //总条数
					_this.page.pageNo = res.data.data.pageNo; //总条数
				})
			},
			handleSizeChange(val) { //每页条数
				this.page.size = val
				this.getDate();
			},
			handleCurrentChange(val) { //前往第几页
				this.page.pageNo = val
				this.getDate()
			},
			//搜索
			search() {
				this.page.pageNo = 1;
				this.getDate()
			},
			// 初始化from
			fixRole(type, value) {
				this.addDialog = true;
				this.roleType = type
				// console.log(value)
				if (type === 'add') {
					this.title = '创建'
					this.roleFrom = {
						name: "",
						desc: ""
					}
				} else {
					this.title = '编辑'
					this.roleFrom = Object.assign({}, value);
				}
				if (this.$refs.roleFrom != undefined) {
					this.$refs.roleFrom.resetFields(); //form表单的dom渲染完在执行this.$refs.roleFrom.resetFields()，去除验证
				}
			},
			// 添加角色
			addSubmit(formName) {
				let _this = this
				// console.log(this.$refs[formName])
				this.$refs[formName].validate((valid) => {
					if (valid) {
						addRole(_this.roleFrom).then((res) => {
							// console.log(res)
							if (res.data.errno == 200) {
								_this.roleList.unshift(res.data.data);
								// console.log(_this.roleList)
								// 添加到数组
								_this.page.total = _this.page.total + 1;
								_this.addDialog = false;
								_this.$message.success('添加角色成功!')
							} else {
								_this.$message.error(res.data.errmsg);
								_this.addDialog = false;
							}
						})
					} else {
						return false;
					}
				});
			},
			//修改角色
			editSubmit(formName) {
				let _this = this
				this.$refs[formName].validate((valid) => {
					if (valid) {
						editRole(_this.roleFrom).then((res) => {
								if (res.data.errno == 200) {
									_this.addDialog = false;
									_this.$message.success('更新角色成功!')
									_this.getDate()
								} else {
									_this.addDialog = false;
									_this.$message.error(res.data.errmsg);
									_this.getDate()
								}
							})
							.catch(() => {});
					} else {
						return false;
					}
				});
			},
			// 删除角色
			delRole(value) {
				let _this = this;
				this.$confirm("此操作将永久删除该角色---" + value.name + "---, 是否继续?", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					console.log(value.id)
					deleteRole(value.id).then((res) => {
						console.log(res)
						// 在数组中删除
						if(res.data.errno == 200){
							const index = _this.roleList.indexOf(value);
							_this.page.total = _this.page.total - 1;
							_this.roleList.splice(index, 1);
						}
					})
					_this.$message.success('删除成功!')
				})
			},
			// 关闭对话框
			closeDialog() {
				this.addDialog = false;
				this.getDate()
			},
			// 授权
			handelRole(value) {
				this.roleDialog = true;
				let _this = this;
				this.permission.roleId = value.id
				getPermission(this.permission.roleId).then((res) => {
					// console.log(res.data)
					_this.systemPermissions = res.data.data.systemPermissions;
					_this.assignedPermissions = res.data.data.assignedPermissions;
				})
			},
			// 授权确认
			permissionSubmit() {
				let _this = this;
				this.roleDialog = true;
				this.roleDialog = false;
				this.permissionLoad = true;
				this.permission.permissions = this.$refs.tree.getCheckedKeys(true);
				// console.log(_this.permission)
				// this.$nextTick(() => {
				// 　　this.$refs.tree.setCheckedKeys([this.permission.permissionsList]);//获取已经设置的资源后渲染
				// });
				updatePermission(_this.permission).then((res) => {
					// console.log(res.data)
					_this.$message.success("授权角色成功")
					_this.roleDialog = false;
					_this.permissionLoad = false;
				})
			}
		},
		created() {
			this.getDate()
		},

	}
</script>

<style>
	.role_container {
		width: 100%;
		height: 660px;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.role_section {
		padding: 20px;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}

	.role_header {
		padding-bottom: 10px;
	}

	.el-table {
		border: 1px solid #EBEEF5 !important;
		border-bottom: none !important;

	}

	.pagination-container {
		background: #fff;
		padding: 32px 16px;
	}

	.pagination-container.hidden {
		display: none;
	}
</style>
